<template>
	<view class="dialog">
		<el-dialog :title="title" :visible.sync="dialogVisible" width="24%" :before-close="handleDialogClose">
			<el-upload
				ref="upload"
			  class="upload-demo"
			  :action="actionUrl"
			  :headers="headers"
			  :data="uploadData"
			  name="excelFile"
			  :multiple="false"
			  :limit="1"
			  :before-remove="beforeRemove"
			  :on-change="handleChange"
			  :on-remove="handleRemove"
			  :on-success="handleAvatarSuccess"
			  :file-list="fileList"
			  :auto-upload="false"
			  >
			  <!-- <el-button size="small" type="primary">文件上传</el-button> -->
			   <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			  <!-- <div slot="tip" class="el-upload__tip">{{ isFile? '':'未选择任何文件' }}</div> -->
			</el-upload>
			<view style="height: 10px;" v-if="!isFile"></view>
			<view class="upload-tips">{{ isFile? '':'未选择任何文件' }}</view>
			
			<el-select v-model="value" placeholder="请选择渠道" class="select-box">
				<el-option
				  v-for="item in selectArr"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			</el-select>
			
			<view class="select-tips" v-if="isTips">请选择渠道</view>
			
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleClose(true)" v-preventReClick>上传</el-button>
				<el-button @click="handleClose(false)">取 消</el-button>
			</span>
		</el-dialog>
	</view>
</template>
<script>
	import {
		Request
	} from '../../model/request.js'
	import {
		Util
	} from '../../utils/util.js'
	import {
		config
	} from "../../api/config.js";
	import {
		serverUrl
	} from "../../api/server_url.js";
	export default {
		props: {
			dialogVisible: '',
			second: '',
			title: '',
			item: {}
		},
		
		data() {
			return {
				form: {
					
				},
				selectArr: [
					{
					  value: '推啊',
					  label: '推啊'
					}, {
					  value: '变现猫',
					  label: '变现猫'
					}
				],
				value: '',
				
				fileList: [],
				file: {},
				
				uploadData: {
					channel: ''
				},
				headers: {
					Authorization: ''
				},
				isTips: false,
				actionUrl: '',
				isFile: false
			}
		},
		
		async mounted() {
			let res = await Request.MEDIAFINDMAL()
			if (res.code == 200) {
				let arr1 = []
				let arr2 = []
				res.data.forEach(t => {
					arr1.push(t.mcMal)
					arr2.push(t.voList)
				})
				this.selectArr1 = arr1
				this.selectArr2 = arr2
			}
			
			if (this.second) {
				this.actionUrl = config.baseUrl + serverUrl.PARTIMPORTPARTICULARS
			} else {
				this.actionUrl = config.baseUrl + serverUrl.MEPIMPORTMEP
			}
			let user = JSON.parse(Util.getStorage('user'))
			let token = user.token || user.accessToken
			this.headers.Authorization = token? ('Bearer ' + token):token
		},
		
		watch: {
			dialogVisible(newVal) {
				console.log(newVal, 'newVal')
				this.$refs.upload && this.$refs.upload.clearFiles()
			},
			
			value() {
				if (this.value) {
					this.isTips = false
				}
			}
		},
		
		methods: {
			handleChange(id, file) {
				this.isFile = true
				console.log(id, file);
			},
			
			handleAvatarSuccess(e) {
				console.log(e, '成功')
				Util.showToast('上传成功')
				this.handleDialogClose(true)
			},
			
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			
			handleRemove() {
				setTimeout(() => {
					this.isFile = false
				}, 500)
			},
			
			handleDialogClose(flag=false) {
				this.value = ''
				this.isTips = false
				this.isFile = false
				// this.$refs.form.clearValidate()
				this.$emit('closeDialog', flag)
			},
			
			async handleClose(e) {
				if (e == true) {
					if (!this.value) {
						this.isTips = true
						return false
					}
					this.uploadData.channel = this.value
					// 上传请求
					if (this.second) { // 广告位
						console.log('广告位上传', this.file)
						this.$refs.upload.submit()
					} else { // 媒体
						console.log('媒体上传', this.fileList)
						this.$refs.upload.submit()
					}
					// if (res.code == 200) {
					// 	Util.showToast('上传成功')
					// 	this.handleDialogClose(true)
					// }
				} else {
					this.handleDialogClose()
				}
			}
		}
	}
</script>
<style scoped>
	.upload-tips {
		font-size: 12px;
	}
	
	.select-tips {
		margin-top: 10px;
		color: #D1141F;
	}
	
	>>> .el-dialog__body {
		padding: 30px 20px 10px;
	}
	
	.dialog {
		/* width: 100%;
	height: 100%; */
		position: absolute;
		left: 0;
		top: 0;
	}

	.el-form-item {
		position: relative;
	}

	.el-form-item::before {
		content: '*';
		position: absolute;
		left: 100px;
		top: 13px;
		color: red;
	}

	/deep/ .item .el-form-item__label {
		position: relative;
		left: -20px;
		/* color: red;
		border: solid 1px red;
		margin-left: 30px; */
	}

	/deep/ .item .el-form-item__label::before {
		content: ' ' !important;
	}

	.photo {
		width: 299px;
		height: 200px;
	}
	
	.el-select {
		width: 100%;
	}
	
	.select-box {
		width: 60%;
		margin-top: 20px;
	}
</style>
